<template>
	<div class="popup-list table-theme">
		<head-title title="营销--弹窗管理"></head-title>
		<el-card>
			<div class="top-menu">
				<div class="menu-left">
					<tabs-view :list="classifyList" :tabsIndex="type" @roleType="stateType"></tabs-view>
					<select-view
						:option-list="statusList"
						:value="is_online"
						placeholder="上下架"
						type="is_online"
						@value="setSelectValue"
					>
					</select-view>
				</div>

				<div class="menu-right">
					<refresh-button @refresh="refreshPage"></refresh-button>
					<search-view :option="searchOption" @value="goSearch" @clear="refreshPage"></search-view>
					<div class="add" style="margin-right: 10px;">
						<el-button type="primary" @click="addPopup">添加弹窗</el-button>
					</div>
				</div>
			</div>
			<p class="data-number">总数据数:{{total}}</p>
			<el-table :data="List">
				<el-table-column label="序号" align="center" prop="show_id"></el-table-column>
				<el-table-column label="图片" align="center" width="80">
					<template slot-scope="scope">
						<ImgPopover :src="scope.row.image"></ImgPopover>
					</template>
				</el-table-column>
				<el-table-column label="名称" align="center" prop="name"></el-table-column>
				<el-table-column label="跳转id" align="center" prop="id"></el-table-column>
				<el-table-column label="类型" align="center" prop="">
					<template slot-scope="scope">
						<p>{{classifyList[scope.row.type].name}}</p>
					</template>
				</el-table-column>
				<el-table-column label="店铺ID" align="center" prop="store_id"></el-table-column>
				<el-table-column label="上下架" align="center">
					<template slot-scope="scope">
						<el-switch v-model="scope.row.is_online" :active-value="1" :inactive-value="0" @change="upDown($event, scope.row.show_id)"></el-switch>
					</template>
				</el-table-column>
				<el-table-column label="排序" align="center" prop="sort"></el-table-column>
				<el-table-column label="备注" align="center" prop="brief"></el-table-column>
				<el-table-column label="时间" align="center" prop="add_time"></el-table-column>
				<el-table-column label="操作" align="center" width="120">
					<template slot-scope="scope">
						<el-button type="primary" size="mini" @click="edit(scope.row.show_id)">编辑</el-button>
						<el-button type="danger" size="mini" @click="del(scope.row.show_id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pages">
				<el-pagination background layout="prev, pager, next, jumper" :total="total" @current-change="init" :current-page="page"></el-pagination>
			</div>
		</el-card>
	</div>
</template>

<script>
	import addPopup from '@/components/layer-dialog/add-popup.vue';
	import ImgPopover from '@/components/ImgPopover';
	import SelectView from "@/components/SelectView";
	import TabsView from '@/components/TabsView'
	export default {
		components: {
			ImgPopover,
			addPopup,
			SelectView,
			TabsView
		},
		data() {
			return {
				is_online: 1,
				statusList: [{
						value: 1,
						label: '上架'
					},
					{
						value: 0,
						label: '下架'
					}
				],
				searchOption: [{
					value: 0,
					label: 'ID'
				}],
				selectContent: '', // 分类搜索平输入框的值
				classSelect: '', // 分类搜索
				multipleSelection: [],
				List: [], // 列表
				total: 0,totalData: 0, 
				type: 0,
				page: 0,
				classifyList: [ '全部' ,'平台商品', 'N98套餐','全屋套餐','活动','货架', '商品列表','外链']
			};
		},
		methods: {
			// 初始化列表
			init(e) {
				this.page = e;
				let data = {
					page: e - 1 ? e - 1 : 0,
					limit: 10,
					is_online: this.is_online,
					store_id: localStorage.getItem('store_id')
				};

				if (this.type != 0) data.type = this.type;
				if (this.type == 0) delete data.type;
				if (this.classSelect == 0) data.show_id = this.selectContent;

				this.List = []
				this.$http(this.$ApiList.ShowLists, data).then(res => {
					this.List = res.datas;
					this.total = res.counts
				});
			},
			// 上下架筛选
			statusSelect() {
				this.init();
			},
			stateType(type) {
				this.type = type;
				this.init();
			},
			refreshPage() {
				this.page = 1;
				this.type = '';
				this.init()
			},
			goSearch(classSelect, selectContent) {
				this.classSelect = classSelect;
				this.selectContent = selectContent;
				this.total = 0;
				this.init();
			},
			// 上下架
			upDown(e, show_id) {
				let data = {
					is_online: e,
					show_id: show_id,
				};
				this.$http(this.$ApiList.ShowOut, data).then(res => {
					this.$layer.msg(res.datas);
					this.init();
				});
			},
			del(show_id) {
				this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(() => {
						let data = {
							show_id: show_id
						};
						this.$http(this.$ApiList.ShowDelate, data).then(res => {
							this.$message({
								message: res.datas,
								type: 'success'
							});
							this.init();
						});
					})
					.catch(() => {});
			},
			addPopup() {
				this.$layer.iframe({
					title: '添加弹窗',
					maxmin: true,
					area: ['50%', '60%'],
					content: {
						content: addPopup, //传递的组件对象
						parent: this, //当前的vue对象
						data: {
							type: 0,
						} //props
					}
				});
			},
			edit(id) {
				this.$layer.iframe({
					title: '添加弹窗',
					maxmin: true,
					area: ['50%', '60%'],
					content: {
						content: addPopup, //传递的组件对象
						parent: this, //当前的vue对象
						data: {
							type: 1,
							id:id
						} //props
					}
				});
			},
			setSelectValue(obj){
				const{ type,value } = obj
				switch (type) {
					case 'is_online':
						this.is_online = value
						break;
				
					default:
						break;
				}
				this.init()
			}
			
		},
		created() {
			this.init();
		},
	};
</script>
<style lang="scss">
	.popup-list {

	}
</style>
